<template>
  <view class="mine-container" :style="{height: `${windowHeight}px`}">
    <!-- 顶部栏 -->
    <view class="header-section">
      <view class="flex padding justify-between align-center">
        <uni-title title="首页" class="header-title"></uni-title>
        <!-- <uni-icons type="search" size="30" class="search-icon"></uni-icons> -->
      </view>
    </view>

    <!-- 商店图片 -->
    <swiper class="swiper-container" autoplay interval="2000" circular>
      <swiper-item>
        <image class="logo-image" src="@/static/petshopLog.png" mode="aspectFit"></image>
      </swiper-item>
      <swiper-item>
        <image class="logo-image" src="@/static/petshop02.png" mode="aspectFit"></image>
      </swiper-item>
      <!-- 如果有多张图片，可以在这里添加多个 swiper-item -->
    </swiper>

    <!-- 商品分类 -->
    <view class="categories">
      <view class="category-row">
        <view class="category-item pet" @click="goToCategory('宠物')">宠物</view>
        <view class="category-item food" @click="goToCategory('主食')">主食</view>
      </view>
      <view class="category-row">
        <view class="category-item cleaning" @click="goToCategory('清洁')">清洁</view>
        <view class="category-item toys" @click="goToCategory('玩具')">玩具</view>
      </view>
      <view class="category-row">
        <view class="category-item decoration" @click="goToCategory('装饰')">装饰</view>
        <!-- <view class="category-item others" @click="goToCategory('租借')">租借</view> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      windowHeight: uni.getSystemInfoSync().windowHeight - 50
    }
  },
  methods: {
    goToCategory(category) {
      // 传递分类参数并跳转到商品分类页面
      uni.navigateTo({
        url: `/pages/category/CategoryProduct?category=${category}`
      });
    }
  }
}
</script>

<style>
.mine-container {
  width: 100%;
  height: 100%;
  background-color: #f5f6f7;
}

.header-section {
  padding: 15px;
  background-color: #ffcbb2;
  color: white;
}

.header-title {
  font-size: 48rpx;
  color: white;
}

.search-icon {
  color: white;
}

.marquee {
  width: 90%;
  height: 150rpx;
  margin: 20rpx auto;
  background-color: #b3f2bb;
  border: 2rpx solid #59b167;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-image {
  width: 100%; /* 让图片宽度适应容器 */
  margin: 20rpx auto; /* 自动水平居中，并添加上下外边距 */
  display: block; /* 解决可能的底部空白问题 */
}

.categories {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  margin-top: 30rpx;
}

.category-row {
  display: flex;
  justify-content: space-around;
  width: 90%;
  margin-bottom: 20rpx;
}

.category-item {
  font-size: 54rpx;
  padding: 20rpx;
  margin: 10rpx;
  border-radius: 10rpx;
  width: 45%;
  text-align: center;
  background-color: #42b983;
  color: white;
}
.swiper-container {
  height: 300px; /* 或者使用vh作为单位，如 50vh，具体值根据图片和屏幕尺寸调整 */
}

.pet {
  background-color: #ffcccb;
}

.food {
  background-color: #f0dea9;
}

.cleaning {
  background-color: #b3e5fc;
}

.toys {
  background-color: #ffab91;
}

.decoration {
  background-color: #e1bee7;
}

.others {
  background-color: #d1c4e9;
}
</style>
